<template>
	<view>
		<span v-show="mainflag">
			<!-- <no-info v-show="!showflag"></no-info> -->
			<!-- <div v-show="!showflag" class="flex-center flex-column" style="height: 800rpx;">
				<image src="/static/erro/nodata.png" style="width: 200rpx;height: 200rpx;"></image>
				<text class="font-color-999">暂无信息...</text>
			</div> -->
			<span class="container flex-column flex-space-between" :class="[info.fitting == 1?'container-showparts':'container']">
			<!-- 	<view class="flex-column container-type-box">
					<text class="report-type-title">报告类型</text>
					<view class="report-type flex-row">
						<view class="report-type-button">
							{{reportType[info.type].type}}
						</view>
					</view>
				</view> -->
			
				<view class="container-mian flex-center flex-column">
					<view class="container-mian-item fault-description flex-row ">
						<text class="text">工单类型:</text>
						<text class="text font-color-666">{{reportType[info.type].type}}</text>
					</view>
					<view class="container-mian-item issolve flex-row ">
						<text class="text">是否解决:</text>
						<text class="text font-color-666">{{info.result == 1?"是":"否"}}</text>
						<!-- <view class="swich">
							<QSswitch color="#1AAD19" v-model="info.result == 1?true:false" disabled="ture"></QSswitch>
						</view> -->
					</view>
					
					<view class="solution-box flex-column">
						<text class="solution1">故障现象:</text>
						<text class="solution-content font-14px flex flex-direction">{{info.reason?info.reason:'无'}}</text>
						<!-- <view class="content-box">
							<textarea class="solution-content font-14px" disabled="false" maxlength="300" v-model="info.reason" placeholder-style="color:#CCCCCC"
							  />
							</view> -->
					</view>
					
					<view class="solution-box flex-column">
						<text class="solution1">解决方案：</text>
						<!-- <view class="content-box">
							<textarea class="solution-content font-14px" disabled="false" maxlength="300" v-model="info.solution" placeholder-style="color:#CCCCCC"
							 />
							</view> -->
							<text class="solution-content font-14px flex flex-direction">{{info.solution?info.solution:'无'}}</text>
					</view>
				</view>
				<view class="container-ischangeparts-box flex-center flex-column">
					<view class="container-mian-item container-ischangeparts flex-row flex-space-between ">
						<text class="text">是否更换配件:</text>
						<text class="text font-color-666">{{info.fitting == 1?"是":"否"}}</text>
							<!-- <view class="swich">
								<QSswitch color="#1AAD19" v-model="" disabled="ture"></QSswitch>
							</view -->
					</view>
					<view v-show="info.fitting == 1?true:false" class="container-mian-item container-parts flex-row flex-space-between ">
						<text class="text">配件名称型号:</text>
						<text class="text font-color-666">{{info.fitting_addtion}}</text>
						<!-- <input class="uni-input" type="text" v-model="info.fitting_addtion" placeholder="请输入配件型号" /> -->
					</view>
				</view>
				<view class="container-mian margin-top flex-center flex-column">
					<view class="container-mian-item fault-description flex-row ">
						<text class="text-eq-title">设备型号:</text>
						<text class="text-eq font-color-666">{{info.eqtype}}</text>
					</view>
					<view class="container-mian-item fault-description flex-row ">
						<text class="text-eq-title">设备机身号:</text>
						<text class="text-eq font-color-666">{{info.number}}</text>
					</view>
					<view class="container-mian-item fault-description flex-row ">
						<text class="text-eq-title">墨水型号:</text>
						<text class="text-eq font-color-666">{{info.ink_type}}</text>
					</view>
					<view class="container-mian-item fault-description flex-row ">
						<text class="text-eq-title">溶剂型号:</text>
						<text class="text-eq font-color-666">{{info.solvent_type}}</text>
					</view>
					<view class="container-mian-item fault-description flex-row ">
						<text class="text-eq-title">设备配置:</text>
						<text class="text-eq font-color-666">{{info.configure}}</text>
					</view>
					<view class="container-mian-item fault-description flex-row ">
						<text class="text-eq-title">所属公司:</text>
						<text class="text-eq font-color-666">{{info.user_dep}}</text>
					</view>
					<view class="container-mian-item fault-description flex-row ">
						<text class="text-eq-title">公司负责人:</text>
						<text class="text-eq font-color-666">{{info.user}}</text>
					</view>
					<view class="container-mian-item fault-description flex-row ">
						<text class="text-eq-title">负责人电话:</text>
						<text class="text-eq font-color-666">{{info.user_phone}}</text>
					</view>
				</view>
				<view class="container-mian margin-top flex-center flex-column">
					<view class="container-mian-item fault-description flex-row ">
						<text class="text-eq-title">提交工程师:</text>
						<text class="text-eq font-color-666">{{engineerInfo.name}}</text>
					</view>
					<view class="container-mian-item fault-description flex-row ">
						<text class="text-eq-title">工号:</text>
						<text class="text-eq font-color-666">{{engineerInfo.number}}</text>
					</view>
					<view class="container-mian-item fault-description flex-row ">
						<text class="text-eq-title">职位:</text>
						<text class="text-eq font-color-666">{{engineerInfo.job}}</text>
					</view>
				</view>
				<view class="add-img flex-column margin-top">
					<text class="text">工作图片</text>
					<view class="flex-row img-box">
						<view v-for="(item,key) in info.file" :key="key" class="img-container">
							<image :src="item.file" class="my-img" @tap="preview(item.file)"></image>
						</view>
					</view>
					
				</view>
			</span>
		</span>
		
	</view>
</template>

<script>
	import uplod from '@/components/sunui-upimg/sunui-upimg.vue'
	import QSswitch from '@/components/QS-inputs-split/elements/QS-switch/index.vue'
	import uniCollapse from '@/components/uni-collapse/uni-collapse.vue'
	import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue'
	import {getReportDetailsByEquipmentId,getEquipmentById,getInfo} from '@/api/user/index.js'
	export default {
		components: {
			uplod,QSswitch,uniCollapse,uniCollapseItem
		},
		data() {
			return {
				mainflag:false,
				//查询失败，没有数据
				showflag:false,
				reportType: [{
					id: 0,
					type: '巡检'
				}, {
					id: 1,
					type: '调试'
				}, {
					id: 2,
					type: '保养'
				}, {
					id: 3,
					type: '维修'
				}, {
					id: 4,
					type: '培训'
				}, {
					id: 5,
					type: '安装'
				}, ],
				info: {
					id:'',
					type: 1,
					reason: " ",
					result: '',
					solution:"",
					fitting:'',
					fitting_addtion:"",
					file:[{
						id:'',
						report_id:'',
						file:" "
					}]

				},
				equipmentInfo:{
					
				},
				engineerInfo:{
					name:'',
					number:'',
					job:''
				}
			}
		},
		methods: {
			submit(){
				console.log(this.submitInfo)
			},
			// ############################图片预览#############################
			preview(imageUrl){
				var imgArr = [];
				imgArr.push(imageUrl);
				//预览图片
				uni.previewImage({
					urls: imgArr,
					current: imgArr[0]
				});
			},
			// 获取设备信息
			getEquipmentInfo(id){
				getEquipmentById(id).then(res =>{
					this.equipmentInfo = res.result[0]
					console.log(this.equipmentInfo)
					uni.hideLoading()
				})
			}

		},
		onShow() {
			/**
			 * 检验当前是否已经登录
			 */
			let curRoute  = this.$mp.page.route;
			this.$intercept.permission(curRoute)
		},
		onLoad(option) {
			console.log(option.id)
			getReportDetailsByEquipmentId(option.id).then((res)=>{
				if(res.result){
					this.info = res.result
					getInfo(this.info.engineer_id).then(res =>{
						this.engineerInfo = res.result
						console.log(res)
					})
					console.log(this.info)
					// this.getEquipmentInfo(res.result.eqid)
					uni.hideLoading()
					this.mainflag = true
					this.showflag = true
				}else{
					uni.hideLoading()
					this.mainflag = true
					this.showflag = false
				}
					
			})
			
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #EFEFF4;
		width: 100%;
		margin: 0 auto;
		min-height: 2350rpx;
	}
	.container-showparts{
		min-height: 2450rpx;
	}
	.container-type-box {
		background-color: #FFFFFF;
		width: 100%;
		height: 290rpx;
	}

	.report-type-title {
		height: 40rpx;
		font-size: 28rpx;
		margin-left: 50rpx;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		width: 95%;
	}

	.report-type {
		border-top: 2rpx solid rgb(240, 240, 240);
		width: 95%;
		height: 250rpx;
		flex-wrap: wrap;

		.report-type-button {
			background-color: #1AAD19;
			width: 26%;
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			display: inline-block;
			font-size: 22rpx;
			border: 2rpx solid #D6D5D6;
			border-radius: 5000rpx;
			margin: 20rpx;
		}
	}

	.container-mian {
		background-color: #FFFFFF;
		width: 100%;

		.fault-description {
			font-size: 32rpx;
			height: 100rpx;

			.text {
				line-height: 100rpx;
				height: 100rpx;
				width: 50%;
				
				&:last-child{
					text-align: center;
				}
			}
			.text-eq {
				line-height: 100rpx;
				height: 100rpx;
				width: 70%;
				
				&:last-child{
					text-align: center;
				}
			}
			.text-eq-title {
				line-height: 100rpx;
				height: 100rpx;
				width: 30%;
				
				&:last-child{
					text-align: center;
				}
			}
			

		}

		.issolve {
			width: 100%;
			height: 100rpx;
			font-size: 32rpx;

			.text {
				line-height: 100rpx;
				width: 50%;
				height: 100rpx;
				
				&:last-child{
					text-align: center;
				}
			}
		}
		
		.solution-box{
			width: 95%;
			min-height: 300rpx;
			margin-bottom: 10rpx;
			border-bottom: 2rpx solid rgb(240,240,240) ;
			.solution{
				margin-bottom: 10rpx;
				width: 100%;
				font-size: 28rpx;
				border-bottom: 2rpx solid rgb(240,240,240) ;
				height: 60rpx;
				line-height: 60rpx;
				align-items: flex-start;
			}
			.solution1{
				margin-bottom: 10rpx;
				width: 100%;
				font-size: 28rpx;
				height: 60rpx;
				line-height: 60rpx;
				align-items: flex-start;
			}
			.content-box{
				background-color: #EFEFF4;
				width: 100%;
				.solution-content{
					word-break: break-all;
					color: #666666;
					width: 95%;
					margin: 0 auto;
					padding: 10rpx;
				}
			}
			
		}
		
		.container-mian-item {
			border-bottom: 1rpx solid rgb(240,240,240);
			width: 95%;
			align-items: center;
		}
	}





	
	
	.container-ischangeparts-box{
		background-color: #FFFFFF;
		width: 100%;
		
		
		.container-ischangeparts {
			width: 95%;
			height: 100rpx;
			.text{
				width: 40%;
				font-size: 32rpx;
				
				&:last-child{
					text-align: center;
				}
			}
		}
		.container-parts {
			width: 95%;
			height: 100rpx;
			.text{
				width: 40%;
				font-size: 32rpx;
				
				&:last-child{
					text-align: center;
				}
			}
			
		}
		.container-mian-item {
			border-bottom: 1rpx solid rgb(240,240,240);
			width: 95%;
			align-items: center;
		}
	}

	.add-img {
		background-color: #FFFFFF;
		width: 100%;
		height: 600rpx;
		align-items: center;
		.text{
			margin-top: 20rpx;
			width: 95%;
			font-size: 28rpx;
			border-bottom: 1rpx solid rgb(240,240,240);
		}
		.img-box{
			align-self: flex-start;
			flex-wrap: wrap;
			width: 95%;
			margin: 0 auto;
			.img-container{
				margin: 10rpx;
				width: 158rpx;
				height: 158rpx;
			}
			
			
		}
	}
</style>